<template>
  <div id="app">
    <mt-header title="笑脸地图">
      <a slot="left" href="javascript:history.back(-1)">
        <mt-button icon="back">返回</mt-button>
      </a>
      <mt-button icon="more" slot="right"></mt-button>
    </mt-header>
    <main>
      <div class="map">
        <el-amap vid="amapDemo" :center="center" :zoom="zoom" class="amap-demo">
          <el-amap-marker v-for="marker in markers" :position="marker.position" :events="marker.events"></el-amap-marker>
          <el-amap-info-window v-for="window in windows" :position="window.position" :visible="window.visible" :content="window.content"></el-amap-info-window>
        </el-amap>
      </div>
      <div class="enterprise">
        <li>
          <a>
            <p>
              托管班
            </p>
            <p>
              福州市仓山区金州北路156号
            </p>
          </a>
        </li>
        <li>
          <a>
            <p>
              托管班
            </p>
            <p>
              福州市仓山区金州北路156号
            </p>
          </a>
        </li>
        <li>
          <a>
            <p>
              托管班
            </p>
            <p>
              福州市仓山区金州北路156号
            </p>
          </a>
        </li>
      </div>
    </main>
  </div>
</template>

<script type="text/ecmascript-6">
  import axios from 'axios';
  import VueAMap from 'vue-amap';
  import {
    Header,
    Button
  } from 'mint-ui';
  export default {
    components: {
      "mt-button": Button,
      "mt-header": Header,
  
    },
    data() {
      return {
        zoom:16,
        center: [121.59996, 31.197646],
        markers: [],
        windows: [],
        icon:'../../img/home_c.png',
      };
    },  mounted() {
      let markers = [];
      let windows = [];
  
      let num = 10;
      let self = this;
  
      for (let i = 0; i < num; i++) {
        markers.push({
          position: [121.59996, 31.197646 + i * 0.001],
          events: {
            click() {
              self.windows.forEach(window => {
                window.visible = false;
              });
  
              self.$nextTick(() => {
                self.windows[i].visible = true;
              });
            }
          }
        });
        windows.push({
          position: [121.59996, 31.197646 + i * 0.001],
          content: `<div class="prompt">${ i }</div>`,
          visible: false
        });
      }
      this.markers = markers;
      this.windows = windows;
    },
  
    //方法
    methods: {
  
    }
  }
  
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
  .map {
    width: 100%;
    height: 250px;
  }
  
  .enterprise {
    li {
      border-bottom: 1px solid #e7e7e7;
      a {
        padding: 10px 0 10px 10px;
        overflow: hidden;
        display: block;
        p {
          margin: 0;
        }
      }
    }
  }
  
  .enterprise li p:first-child {
    margin-bottom: 5px;
    color: #333333;
    font-size: .95rem;
  }
  
  .enterprise li p:last-child {
    color: #868686;
  }
</style>
